<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="index-statistics">
          <el-card class="box-card" shadow="hover">
            <p class="title">引流客户数</p>
            <p class="num">4555</p>
            <div class="middle">
              <span>本周新增 <span class="current"> 222</span></span>
              <span>本月新增 <span class="current">4555</span></span>
            </div>
            <div class="s-bottom">
              <span>激活客户数</span>
              <span>54544</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="index-statistics">
          <el-card class="box-card" shadow="hover">
            <p class="title">提交方案数</p>
            <p class="num">4555555</p>
            <div class="middle">
              <span>本周新增 <span class="current"> 222</span></span>
              <span>本月新增 <span class="current">4555</span></span>
            </div>
            <div class="s-bottom">
              <span>选中方案数</span>
              <span>54544</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="index-statistics">
          <el-card class="box-card" shadow="hover">
            <p class="title">签单数</p>
            <p class="num">4555555</p>
            <div class="middle">
              <span>本周新增 <span class="current"> 222</span></span>
              <span>本月新增 <span class="current">4555</span></span>
            </div>
            <div class="s-bottom">
              <span>完成数</span>
              <span>54544</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="index-statistics">
          <el-card class="box-card" shadow="hover">
            <p class="title">好评率</p>
            <p class="num">45255</p>
            <div class="middle" style="overflow: hidden;position: relative">
              <el-progress :text-inside="true" :stroke-width="18" style="width: 100%" :percentage="100"></el-progress>
            </div>
            <div class="s-bottom">
              <span>好评数</span>
              <span>54544</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 19px;">
      <el-row :gutter="8" style="margin-left: 0;margin-right: 0">
        <el-col :span="12" class="background-white padding-l-r-0">
          <div class="map-title">
            <p class="padding-l-r-20">客户C端地区分布</p>
          </div>
          <div style="padding-bottom: 20px;height: 40vh;width: calc((100vw - 310px) / 2)">
            <div id="left_map" style="height: 100%;width: 100%"></div>
          </div>
        </el-col>
        <el-col :offset="1" :span="11" class="">
          <el-row class="background-white">
            <div class="map-title">
              <p class="padding-l-r-20">培训热门目的地</p>
            </div>
            <div style="height: 20vh;">
              <div id="train_hot" style="height: 100%;width: 100%"></div>
            </div>
          </el-row>
          <el-row class="background-white" style="margin-top: 16px">
            <div class="map-title">
              <p class="padding-l-r-20">客户C端行业分布</p>
            </div>
            <div style="width: calc((100vw - 400px) / 2)">
              <div id="c_industry" style="height: 15vh;width: 100%"></div>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
  import '~/utils/china.js'
  import {mapMutations} from 'vuex'

  export default {
    layout: 'frame',
    data() {
      return {}
    },
    mounted: function () {
      //设置面包屑导航是否显示
      this.SetIsShowBread(false);

      this.showMap();
      this.showTrainHot();
      this.showCIndustry();
    },


    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread'
      ]),
      showMap() {
        if (process.client) {
          let myChart = this.$echarts.init(document.getElementById('left_map'));

          let geoCoordMap = {
            '台湾': [121.5135, 25.0308],
            '黑龙江': [127.9688, 45.368],
            '内蒙古': [110.3467, 41.4899],
            "吉林": [125.8154, 44.2584],
            '北京市': [116.4551, 40.2539],
            "辽宁": [123.1238, 42.1216],
            "河北": [114.4995, 38.1006],
            "天津": [117.4219, 39.4189],
            "山西": [112.3352, 37.9413],
            "陕西": [109.1162, 34.2004],
            "甘肃": [103.5901, 36.3043],
            "宁夏": [106.3586, 38.1775],
            "青海": [101.4038, 36.8207],
            "新疆": [87.9236, 43.5883],
            "西藏": [91.11, 29.97],
            "四川": [103.9526, 30.7617],
            "重庆": [108.384366, 30.439702],
            "山东": [117.1582, 36.8701],
            "河南": [113.4668, 34.6234],
            "江苏": [118.8062, 31.9208],
            "安徽": [117.29, 32.0581],
            "湖北": [114.3896, 30.6628],
            "浙江": [119.5313, 29.8773],
            "福建": [119.4543, 25.9222],
            "江西": [116.0046, 28.6633],
            "湖南": [113.0823, 28.2568],
            "贵州": [106.6992, 26.7682],
            "云南": [102.9199, 25.4663],
            "广东": [113.12244, 23.009505],
            "广西": [108.479, 23.1152],
            "海南": [110.3893, 19.8516],
            '上海': [121.4648, 31.2891],

          };

          let data = [
            {name: "北京", value: 199},
            {name: "天津", value: 42},
            {name: "河北", value: 102},
            {name: "山西", value: 81},
            {name: "内蒙古", value: 47},
            {name: "辽宁", value: 67},
            {name: "吉林", value: 82},
            {name: "黑龙江", value: 123},
            {name: "上海", value: 24},
            {name: "江苏", value: 92},
            {name: "浙江", value: 114},
            {name: "安徽", value: 109},
            {name: "福建", value: 116},
            {name: "江西", value: 91},
            {name: "山东", value: 119},
            {name: "河南", value: 137},
            {name: "湖北", value: 116},
            {name: "湖南", value: 114},
            {name: "重庆", value: 91},
            {name: "四川", value: 125},
            {name: "贵州", value: 62},
            {name: "云南", value: 83},
            {name: "西藏", value: 9},
            {name: "陕西", value: 80},
            {name: "甘肃", value: 56},
            {name: "青海", value: 10},
            {name: "宁夏", value: 18},
            {name: "新疆", value: 180},
            {name: "广东", value: 123},
            {name: "广西", value: 59},
            {name: "海南", value: 14},
          ];
          var max = 480, min = 9; // todo
          var maxSize4Pin = 100, minSize4Pin = 20;

          var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
                });
              }
            }
            return res;
          };

          let option = {
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#fff' // 0% 处的颜色
              }, {
                offset: 1, color: '#fff' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            title: {
              top: 20,
              text: '',
              subtext: '',
              x: 'center',
              textStyle: {
                color: '#ccc'
              }
            },

            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                if (typeof (params.value)[2] == "undefined") {
                  return params.name + ' : ' + params.value;
                } else {
                  return params.name + ' : ' + params.value[2];
                }
              }
            },

            legend: {
              orient: 'vertical',
              y: 'bottom',
              x: 'right',
              data: ['pm2.5'],
              textStyle: {
                color: '#fff'
              }
            },
            visualMap: {
              show: false,
              min: 0,
              max: 500,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: true,
              seriesIndex: [1],
              inRange: {}
            },
            geo: {
              map: 'china',
              show: true,
              roam: true,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false,
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#3bafff',
                  borderColor: '#092f8f',//线
                  shadowColor: '#092f8f',//外发光
                  shadowBlur: 0
                },
                emphasis: {
                  areaColor: '#409eff',//悬浮区背景
                }
              }
            },
            series: [
              {
                symbolSize: 5,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#fff'
                  }
                },
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),

              },
              {
                type: 'map',
                map: 'china',
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#031525',
                    borderColor: '#FFFFFF',
                  },
                  emphasis: {
                    areaColor: '#2B91B7'
                  }
                },
                animation: false,
                data: data
              },
              {
                name: 'Top 5',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                symbolSize: [30, 30],
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: '#409eff',
                      fontSize: 9,
                    },
                    formatter(value) {
                      return value.data.value[2]
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "rgba(255,255,255,.9)"
                    //color: '#fff', //标志颜色
                  }
                },
                data: convertData(data),
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                zlevel: 1
              },
            ]
          };
          myChart.setOption(option);
        }
      },
      showTrainHot() {
        if (process.client) {
          let train_hot_my_chart = this.$echarts.init(document.getElementById('train_hot'));

          // 指定图表的配置项和数据
          let option = {
            title: {
              text: ''
            },
            tooltip: {},
            // legend: {
            //   data:['销量']
            // },
            grid: {
              top: 30,
              x: 30,
              y: 10,
              x2: 30,
              y2: 40,
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              barWidth: 50,//柱图宽度
              data: [5, 20, 36, 10, 10, 200]
            }]
          };

          // 使用刚指定的配置项和数据显示图表。
          train_hot_my_chart.setOption(option);
        }
      },
      showCIndustry() {
        //train_hot
        if (process.client) {
          let train_hot_my_chart = this.$echarts.init(document.getElementById('c_industry'));

          // 指定图表的配置项和数据
          let option = {
            title: {
              text: ''
            },
            tooltip: {},
            grid: {
              top: 30,
              x: 30,
              y: 10,
              x2: 30,
              y2: 40,
            },
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [

              {
                name: '销量',
                type: 'bar',
                barWidth: 50,//柱图宽度
                data: [5, 20, 36, 10, 10, 20],
              }]
          };

          // 使用刚指定的配置项和数据显示图表。
          train_hot_my_chart.setOption(option);
        }
      },
    }
  }


</script>

<style lang="scss">
  body {
    min-width: 1216px;
  }

  .index-statistics {
    box-sizing: border-box;
    background: #FFFFFF;
    height: 198px;

    .title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.427);
      line-height: 22px;
    }

    .num {
      margin-top: 5px;
      font-size: 30px;
      color: rgba(0, 0, 0, 0.847);
      line-height: 38px;
    }

    .middle {
      padding-bottom: 22px;
      border-bottom: 1px solid #f2f2f2;
      margin-top: 22px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.427);
      }

      .current {
        color: rgba(0, 0, 0, 0.647);
      }
    }

    .s-bottom {
      margin-top: 10px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.647);
    }
  }

  .quick-start {
    padding-bottom: 20px;
    background: #fff;

    .header {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 56px;
      border-bottom: 1px solid #f2f2f2;

      p {
        font-size: 16px;
        font-weight: 700;
        color: #333333;
        line-height: 24px;
      }
    }

    .quick-start-body {
      margin-top: 21px;
      padding-left: 21px;
      padding-right: 21px;

      span {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.647);
        line-height: 22px;
      }
    }
  }

  /*地图统计区域*/
  .map-title {
    border-bottom: 1px solid #f2f2f2;
    height: 56px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: center;

    p {
      font-size: 16px;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.847);
      line-height: 18px;
    }
  }

</style>
